<template>
  <div id="publicity">
     <!-- 顶部 -->
      <div class="top">
        <div class="center tip">
          <span class="left">欢迎访问郑州高新技术产业开发区信用建设管理平台</span>
          <span class="right">
            <span>管理后台</span>
            <span>意见建议</span>
          </span>
        </div>
      </div>
       <!-- 顶部导航搜索 -->
    <div class="bgsearch">
      <div class="center">
          <div class="search">
            <input type="text" placeholder="请输入企业名或组织机构代码">
            <button></button>
          </div>
      </div>
    </div>
     <!-- 导航栏 -->
      <div class="nav">
        <div class="center">
          <div class="con">
            <router-link tag="p"  to="index"><span>首页</span></router-link>
            <router-link tag="p"  to="policy"><span>政策法规</span></router-link>
            <router-link tag="p" to="build"><span>信用建设</span></router-link>
            <router-link tag="p" to="map"><span>信用地图</span></router-link>
            <router-link tag="p" to="responsibility"><span>信用责任</span></router-link>
            <router-link tag="p" class="active" to='publicity'><span>信息公示</span></router-link>
          </div>
        </div>
      </div>
      <!-- 当前位置 -->
      <div class="current">
        <div class="center">
          <img src="../../assets/image/icon_current.png" alt="">
          <span>当前位置：<router-link to="index" tag="span">首页</router-link>></span><span class="red">信息公示</span>
        </div>
      </div>
      <!-- 内容部分 -->
      <div class="content center">
        <div class="navcon">
          <div class="active"> <img src="../../assets/image/icon_Permit1.png" alt=""> <span>行政许可</span></div>
          <div> <img src="../../assets/image/icon_punish.png" alt=""> <span>行政处罚</span></div>
          <div> <img src="../../assets/image/icon_abnormal.png" alt=""> <span>经营异常</span></div>
          <div> <img src="../../assets/image/icon_Illegal.png" alt=""> <span>严重违法</span></div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="center gsDetail">
        <div class="query">
          <div class="qleft">
            <span class="lefts">行政许可名称：
              <el-input v-model="input" size="mini" placeholder="请输入企业或个人信息（如：名称、统一社会信用代码或身份证号）"></el-input>
            </span>
            <span class="qright">许可决定日期：
                <div class="block">
                    <el-date-picker
                      v-model="riqi"
                      type="date"
                      size="mini"
                      placeholder="选择日期">
                  </el-date-picker>
              </div>
                <button class="btn">搜索</button>
            </span>
          </div>
          <div class="qright"></div>
        </div>
        <div class="num">
          <span>根据搜索条件，共找到<span class="red">323566</span>条数据</span>
        </div>
        <!-- 表格 -->
        <div class="table">
           <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="faren" label="法人"  align='center'></el-table-column>
            <el-table-column prop="jdwsh" label="决定文书号"  align='center'></el-table-column>
            <el-table-column prop="xmmc" label="项目名称"  align='center'></el-table-column>
            <el-table-column prop="xkjg" label="许可机关"  align='center'></el-table-column>
            <el-table-column prop="xkjdrq" label="许可决定日期"  align='center'></el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="pgfenye">
           <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            layout="total, prev, pager, next, jumper"
            :total="200">
            </el-pagination>
        </div>
            
    </div>
    <foot></foot>
  </div>
</template>

<script>
import foot from './home/foot.vue'
export default {
  name: 'publicity',
  components: {
    foot
  },
  data () {
    return {
      tableData: [
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
      ],
      currentPage: 1,
    };
  },
  methods: {
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
  }
};
</script>

<style lang="scss">
  #publicity {
     .center {
      width: 1200px;
      margin: 0 auto;
    }
    .top {
      width: 100%;
      height:40px;
      background:rgba(241,241,241,1);
      .tip {
        display: flex;
        justify-content: space-between;
        span {
          font-size:16px;
          font-weight:400;
          color:rgba(56,56,56,1);
          line-height: 40px;
          &.right {
            span:first-child {
              padding-right: 20px;
              border-right: 2Px solid #cccccc;
            }
            span:last-child {
              padding-left: 18px;
            }
          }
        }
      }
    }
    // ------------------------
      .bgsearch {
      width: 100%;
      height: 300px;
      background-image: url(../../assets/image/bannergs.png);
      background-position: center center;
      position: relative;
      background-repeat: no-repeat;
      // padding-top: 450px;
      .center {
        position: relative;
        .search {
          display: inline-block;
          position: absolute;
          top: 230px;
          left: 696px;
          width:435px;
          height:51px;
          input {
            position: absolute;
            left: 0;
            top: 0;
            width:435px;
            height:51px;
            box-sizing: border-box;
            background:rgba(255,255,255,1);
            box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.35);
            opacity:0.85;
            border-radius:20px;  
            padding-right: 70px;
            padding-left: 20px;
          }
          button {
            position: absolute;
            right: -20px;
            top: 0;
            width:55px;
            height:51px;
            background-color: #db4444;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            background-image: url(../../assets/image/search.png);
            background-position: center center;
            background-repeat: no-repeat;
          }
        }
      }
   }
   .nav {
        width: 100%;
        height:67px;
        background:rgba(213,35,36,1);
        position: relative;
        margin-top: -1px;
        .con {
          display: flex;
          justify-content: flex-start;
          p {
            width: 190px;
            height: 67px;
            font-size: 20px;
            color: white;
            line-height: 67px;
            text-align: center;
            box-sizing: border-box;
            border-left: 2px solid white;
            &:last-child {
              border-right: 2px solid white;
            }
            &.active {
              background-color: white;
              span {
                color: #D52324;
                border-bottom: 1px solid #D52324; 
              }
            }
          }
      }
    }
    .current {
      height:50px;
      background:rgba(191,190,190,1);
      margin-bottom: 28px;
      img {
        line-height: 50px;
      }
      span {
        line-height: 50px;
        &.red {
          color: #d52324;
        }
      }
    }
    .content {
      .navcon {
        height: 80px;
        background: #e3e2e2;
        display: flex;
        >div {
          flex: 1;
          height: 80px;
          border-right: 1px solid #ffffff;
          align-items: center;
          text-align: center;
          &.active {
            background: #D52324;
            span {
              color: white;
            }
          }
          img {
            vertical-align: middle;
          }
          span {
            line-height: 80px;
          }
        }
      }
    }
    .gsDetail {
      border:1px solid rgba(225, 222, 222, 1);
      background-color: #fafafa;
      margin-bottom: 40px;
      .query {
        margin: 40px 0 30px;
        .qleft {
            display: inline-block;
            margin-left: 85px;
            .lefts {
             .el-input {
               width: 458px;
             }
          }
         }
         .qright {
           display: inline-block;
           margin-left: 85px;
           .el-date-editor.el-input, .el-date-editor.el-input__inner {
             width: 142px;
           }
           .block {
             display: inline-block;
           }
           .btn {
             margin-left: 20px;
             width:56px;
            height:24px;
            background:rgba(213,35,36,1);
            border-radius:5px;
            color: white;
           }
         }
        }
        .num {
          padding-left:22px; 
          span {
            font-size:12px;
            font-family:MicrosoftYaHei;
            font-weight:400;
            color:rgba(182,181,181,1);
            .red {
              color: #B90522;
            }
          }
        }
        .table {
          width: 100%;
        }
        .pgfenye {
          text-align: right;
          margin: 20px 20px;
        }
    }
  }
</style>
